почему размеры шрифта на макете и на сайте так различаются?

[sfc]

Например:

1. В фотошопе смотрю параметры шрифта:

2. пишу в css:

span {font: 12pt Arial, sans-serif}

3.

текст на макете:

отображение в хроме (в других примерно также):

Подскажите пожалуйста, почему такие различия?

[Great Rash]

Потому что pt зависят от конкретного ppi. А он разный для макета и для экрана. У вас поди разрешение в фотошопе стоит 72 pixels/inch? Вместо 72 поставьте 96 и все станет 1 в 1.

UPD: У нас в стране нет такого понятия как веб-дизайнер, должность есть, а людей нет. Они все настолько оторваны от веба, что таких базовых вещей просто не знают

[atew]

Потому что pt зависят от конкретного ppi. А он разный для макета и для экрана. У вас поди разрешение в фотошопе стоит 72 pixels/inch? Вместо 72 поставьте 96 и все станет 1 в 1.

UPD: У нас в стране нет такого понятия как веб-дизайнер, должность есть, а людей нет. Они все настолько оторваны от веба, что таких базовых вещей просто не знают

Скажите пожалуйста, какие параметры нужно указывать при создании нового файла в котором будет создавать дизайн сайта, что бы макет, цвета и т.д. сходились 1 в 1 с готовой версткой в браузере ??

[Great Rash]

Разрешение 96 pixels/inch и цвет RGB. Сглаживание шрифтов лучше из макета убирать, т.к. в браузерах оно все равно не такое как в фотошопе. Ну если уж прям пипец как хочется сглаживания, то лучше ставить sharp, т.к. оно больше всего похоже (однако, все равно не такое как у браузеров).

[atew]

Разрешение 96 pixels/inch и цвет RGB. Сглаживание шрифтов лучше из макета убирать, т.к. в браузерах оно все равно не такое как в фотошопе. Ну если уж прям пипец как хочется сглаживания, то лучше ставить sharp, т.к. оно больше всего похоже (однако, все равно не такое как у браузеров).

Спасибо, а то я всегда разрешение ставлю 300 - чем больше тем лучше)теперь попробую при 96 работать!))

цвет RGB = должен быть равен 8 бит?

[Great Rash]

Спасибо, а то я всегда разрешение ставлю 300 - чем больше тем лучше)

Это стандарт для полиграфии, на сколько я знаю. Я не дизайнер и не полиграфист, и не знаю нюансов.

цвет RGB = должен быть равен 8 бит?

Я не знаю работает ли браузер с цветом или все отдается на откуп операционке и монитору. В любом случае эпоха восьмибитного цвета ушла в прошлое, так что, как мне кажется, ставить можно любую цветность. Однако, у нас дизайнеры никогда не заморачивались на цветность, и с этим никогда не было проблем. Да и глазами лично я 8 от 16 не отличу, так что имхо можно не париться.

[NeoXidizer]

Photoshop RGB Color mode uses the RGB model, assigning an intensity value to each pixel. In 8?bits-per-channel images, the intensity values range from 0 (black) to 255 (white) for each of the RGB (red, green, blue) components in a color image. For example, a bright red color has an R value of 246, a G value of 20, and a B value of 50. When the values of all three components are equal, the result is a shade of neutral gray. When the values of all components are 255, the result is pure white; when the values are 0, pure black.

RGB images use three colors, or channels, to reproduce colors on screen. In 8?bits-per-channel images, the three channels translate to 24 (8 bits x 3 channels) bits of color information per pixel. With 24?bit images, the three channels can reproduce up to 16.7 million colors per pixel. With 48?bit (16?bits-per-channel) and 96?bit (32?bits-per-channel) images, even more colors can be reproduced per pixel. In addition to being the default mode for new Photoshop images, the RGB model is used by computer monitors to display colors. This means that when working in color modes other than RGB, such as CMYK, Photoshop converts the CMYK image to RGB for display on screen.

8 бит на каждый канал означает 24 бита, что и используется в ОС. Остальные 32-24=8 бит, это альфа канал, тобишь смесь обычных пикселей и полупрозрачных

И если погуглить, то рекомендуют разрешение 72 pixels/inch.

Use 72 dpi and turn anti-aliasing off for any text.

72 for web

150 for newspaper

300 for print and magazine

и вообще можно не париться, давно все придумали за вас. При создании нового файла нужно выбрать Preset:Web и выбрать Size, все остальное оставить по умолчанию

[Great Rash]

И если погуглить, то рекомендуют разрешение 72 pixels/inch.

Если оставить такое разрешение, то будут возникать такие вопросы как у ТС

[NeoXidizer]

Спасибо, а то я всегда разрешение ставлю 300 - чем больше тем лучше)

[sfc]

Потому что pt зависят от конкретного ppi. А он разный для макета и для экрана. У вас поди разрешение в фотошопе стоит 72 pixels/inch? Вместо 72 поставьте 96 и все станет 1 в 1.

UPD: У нас в стране нет такого понятия как веб-дизайнер, должность есть, а людей нет. Они все настолько оторваны от веба, что таких базовых вещей просто не знают

Да, действительно 72 было. Теперь вроде разобрался. Спасибо)

[SelenIT]

И если погуглить, то рекомендуют разрешение 72 pixels/inch.

А если присмотреться, то видно, что рекомендует это дизайнер с привычками первой половины 90-х и происходит это за три года до того, как браузерная реальность в лице 1in = 72pt = 96px была высечена в граните зафиксирована в CSS-стандарте .

[clavin]

И если погуглить, то рекомендуют разрешение 72 pixels/inch.

А если присмотреться, то видно, что рекомендует это дизайнер с привычками первой половины 90-х и происходит это за три года до того, как браузерная реальность в лице 1in = 72pt = 96px была высечена в граните зафиксирована в CSS-стандарте .

Что-то не сходится.. Если смотреть в стандарте, то получается, что 1pt=1/0.75=1.333(3)px. Тогда в одном дюйме пикселей 1in=1.3333*72=96px

Размер экрана моего монитора по высоте равен где-то 30.2см или 11.88in. А в пикселях это будет 96px*11.88=1140. А у меня расширение экрана стоит 1024x768px. Где-то нестыковка или я что-то упустил.

Может поподробнее объясните со шрифтами? Самого этот вопрос всегда интересовал со шрифтами, но квалификации не хватает сделать какие-то выводы и понять, как их размеры строятся.

p.s. Подправил подсчёты

Edited June 6, 2012 by clavin

[Great Rash]

Там есть такое понятие как reference pixel. Как я понимаю, все расчеты ведутся относительно него. Разрешение монитора тут не играет роли.

[SelenIT]

Где-то нестыковка или я что-то упустил.

Нестыковка есть, т.к. экраны очень редко "знают" свой честный физический размер и могут сообщить его браузеру. Поэтому стандарт предписывает "приблизительно подгонять" CSS-овский пиксель таким целым числом физических пикселей экрана, которое ближе всего к 1/96 дюйма (хотя возможен разброс). Для большинства существующих экранов это число равно 1, для "ретины" нового айпада — двум.

Конечно, в итоге получается бардак, что размер CSS-дюйма может неслабо отличаться от дюйма физического, но разработчики стандарта решили, что в сложившейся действительности это меньшее зло...